<template>
    <div class="wh-editor">
        <div
            ref="editorElem"
            style="text-align:left"
        ></div>
    </div>
</template>

<script type="text/javascript">
import E from "wangeditor";
import api from "@/api";
import {baseURL} from "../../utils/axios";

/**
 * 富文本编辑器wangEditor
 *
 * @props
 */
export default {
    name: "jyEditor",
    data() {
        return {
            uploadPath: "",
            editor: null,
            info_: null,
            baseURL:baseURL
        };
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
        value: {
            type: String,
            default: ""
        },
        isClear: {
            type: Boolean,
            default: false
        }
    },
    methods: {},
    components: {},
    created() {},
    mounted() {
        this.editor = new E(this.$refs.editorElem);
        this.editor.customConfig.menus = [
            "head", // 标题
            "bold", // 粗体
            "fontSize", // 字号
            "fontName", // 字体
            "italic", // 斜体
            "underline", // 下划线
            "strikeThrough", // 删除线
            "foreColor", // 文字颜色
            "backColor", // 背景颜色
            "link", // 插入链接
            "list", // 列表
            "justify", // 对齐方式
            "quote", // 引用
            "image", // 插入图片
            "table", // 表格
            "undo", // 撤销
            "redo"
        ];
        this.editor.customConfig.customUploadImg = function(files, insert) {
            // files 是 input 中选中的文件列表
            // insert 是获取图片 url 后，插入到编辑器的方法
            var data =new  FormData();
            data.append("multipartFile", files[0]);
            api.common.uploadImg(data).then(res=>{
                insert(baseURL + res.msg);
            })
        };
        this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024;
        this.editor.customConfig.onchange = html => {
            this.$emit("onchange", html);
        };
        this.editor.create();
    },
    watch: {
        isClear(val) {
            // 触发清除文本域内容
            if (val) {
                this.editor.txt.clear();
                this.info_ = null;
            }
        },
        value: function(value) {
            if (value !== this.editor.txt.html()) {
                this.editor.txt.html(this.value);
            }
        }
        //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.wh-editor {
    width: 100%;

}
.w-e-text-container{
    z-index: unset!important;
}
</style>
